<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'lineowner.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'lineowner',
  data: function () {
    return {
      api: this.$api.lineowner,
      apiEdit: this.$api.lineowner + 'modify',
      apiCreate: this.$api.lineowner + 'modify',
      name: '工序人员对应',
      columns: [
        { title: '工厂', key: 'plant_name', width: 120 },
        { title: '线别名', key: 'line_name', width: 140 },
        { title: '班制', key: 'shift_name', width: 100 },
        { title: '人员类型', key: 'line_post_id', width: 100 },
        { title: '人员姓名', key: 'member_name', width: 70 },
        { title: '电话', key: 'tel_no', width: 110 },
        { title: '邮箱', key: 'email_address' },
        { title: '班制开始时间', key: 'start_time', width: 100 },
        { title: '班制结束时间', key: 'end_time', width: 100 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '线别名',
          key: 'line_id',
          span: 12,
          name: 'select',
          events: {
            change: null,
          },
          options: [],
        },
        { title: '班制', key: 'line_shift_id', span: 12, name: 'select', props: {}, options: [] },
        { title: '人员类型', key: 'line_post_id', span: 12, name: 'select', props: {}, options: [] },
        { title: '人员姓名', key: 'member_name', span: 12 },
        { title: '电话', key: 'tel_no', span: 12 },
        { title: '邮箱', key: 'email_address', span: 12 },
        {
          title: '照片',
          key: 'member_picture',
          name: 'imgUploader',
          span: 24,
          props: {
            showCount: false,
            maxCount: 1,
          },
          events: {
            addImg: null,
            deleteImg: null,
          },
        },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
      initData: {
        line_shift_id: '',
      },
      line_id: '',
    }
  },
  methods: {
    formatAfterGet(data) {
      //依据实际需求处理
      if (data.member_picture) {
        data.member_picture = [this.$api.baseUrl + data.member_picture]
      } else {
        data.member_picture = []
      }
      this.lineChange(data.line_id)
      return data
    },
    formatBeforeSave(data) {
      //依据实际需求处理
      let tmp = _.cloneDeep(data)
      tmp.member_picture = ''
      if (data.member_picture && data.member_picture[0]) {
        tmp.member_picture = _.replace(data.member_picture[0], this.$api.baseUrl, '')
      }
      return tmp
    },
    uploadImg(files, list) {
      let data = new FormData()
      data.append('file', files[0])
      data.append('file_type', 'LINE_ENGINEER')
      axios({
        method: 'post',
        url: this.$api.fileupload + 'upload',
        headers: { Authorization: 'Bearer ' + getToken() },
        data,
      })
        .then((r) => {
          if (r.data.data[0]) {
            list.push(this.$api.baseUrl + r.data.data[0])
          } else {
            this.$message({ message: '上传失败', type: 'error' })
          }
        })
        .catch(() => {
          this.$message({ message: '上传失败', type: 'error' })
        })
    },
    deleteImg(i, list) {
      let formData = new FormData()
      formData.append('file_path', _.replace(list[i], this.$api.baseUrl, ''))
      this.$request(this.$api.fileupload + 'delete', formData, 'post')
        .then((r) => {
          list.splice(i, 1)
        })
        .catch(() => {
          this.$message({ message: '删除失败', type: 'error' })
        })
    },
    lineChange(v) {
      this.data.line_shift_id = ''
      this.setFieldOptions('line_shift_id', [])
      this.$request(this.$api.line + 'getbyid', { id: v }).then((r) => {
        this.setFieldOptions('line_shift_id', r.line_shift, 'line_shift_id', 'shift_name')
      })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.line + 'getlistbypage').then((r) => {
      this.setFieldOptions('line_id', r.list, 'id', 'line_name')
    })
    this.$request(this.$api.dictionary + 'getchildren', {
      parentType: 'line_engineer_type',
    })
      .then((r) => {
        this.setFieldOptions('line_post_id', r, 'value', 'value')
      })
      .catch(() => {})
    this.getFieldConfig('line_id').events.change = this.lineChange
    this.getFieldConfig('member_picture').events.deleteImg = this.deleteImg
    this.getFieldConfig('member_picture').events.addImg = this.uploadImg
  },
}
</script>
<style scoped>
.viewer-container {
  z-index: 99999 !important;
}
</style>
